<template>
	<view class="content">
		<view class="top">
			<customHeader></customHeader>
		</view>
		<view class="center">

			<view class="content_search">
				<view class="search_item">
					<view style="font-size: 43rpx;">订单号:</view>
					<input v-model="no" disabled />
				</view>

				<view class="search_item">
					<view style="font-size: 43rpx;">客户名称:</view>
					<input v-model="customer_name" disabled />
				</view>

				<view class="search_item">
					<view style="font-size: 43rpx;">订单备注:</view>
					<input v-model="remark" :disabled="!showEdit" />
				</view>
			</view>

			<view class="search_btn">
				<u-button @click="handleDelete">删除</u-button>
				<u-button @click="handleEditd">{{ showEdit?'完成': '编辑' }}</u-button>
			</view>

			<t-table >
				<t-tr  >
					<t-th style="flex:0 0 80upx;word-break: break-all;">
						<checkbox-group @change="changeAll">
							<checkbox value="selectAll" :checked="selectAll" />
						</checkbox-group>
					</t-th>
					<t-th>图片</t-th>
					<!-- <t-th  style="flex:0 0 300upx;word-break: break-all;">订单号</t-th> -->
					<t-th style="flex:0 0 269upx;">货号</t-th>
					<t-th style="flex:0 0 439upx;word-break: break-all;">名称</t-th>
					<t-th style="flex:0 0 89upx;">件数</t-th>

					<t-th>数量</t-th>
					<t-th>单价</t-th>

					<t-th>金额</t-th>
					<t-th style="flex:0 0 130upx;">完工数量</t-th>
					<t-th style="flex:0 0 130upx;">发货数量</t-th>
					<t-th style="flex:0 0 130upx;">发货金额</t-th>
					<t-th style="flex:0 0 250upx;">备注</t-th>
				</t-tr>
			</t-table>
			<scroll-view :scroll-top="0" scroll-y="true" class="table_content">
				<t-table >
					<view  v-for="(item, index) in data" :key="item.id">
						<t-tr>
							<t-td style="flex:0 0 80upx;word-break: break-all;">
								<checkbox-group @change="changeBox($event, item, index)">
									<checkbox value="check" :checked="item.check" />
								</checkbox-group>
							</t-td>
							<t-td>
                                <image style="width: 100%; height: 100%"  mode="scaleToFill" :src="item.files.length ? item.files[0].newUrl : '../../static/none.png'"></image>
                            </t-td>
							<t-td style="flex:0 0 269upx;">{{ item.materiel_no }}</t-td>
							<t-td style="flex:0 0 439upx;word-break: break-all;">
								<!-- <view class="bao_td_left" >
									{{ item.materiel_name }}
								</view> -->
								<textarea 
									style="width: 100%; text-align: left;" 
									:auto-height="true"
									disabled
									v-model="item.materiel_name" />
							</t-td>
							<!-- 件数 -->
							<t-td style="flex:0 0 89upx;">{{ item.pieces }}</t-td>

							<t-td>
								<!-- {{ item.yquantity }} -->
								<input @input="changeInput1(item, index, $event)" type="number" v-model.number="item.yquantity" :disabled="!showEdit" />
							</t-td>
							<t-td>
								<!-- {{ item.price }} -->
								<!-- <input  @input="changeInput2(item, index, $event)" type="number" v-model.number="item.price" :disabled="!showEdit" /> -->
								<input  @input="changeInput2(item, index, $event)" type="number" v-model.number="item.wholesale" :disabled="!showEdit" />
							</t-td>

							<t-td>{{ item.amount }}</t-td>
							<t-td style="flex:0 0 130upx;">{{ item.comp_qty }}</t-td>
							<t-td style="flex:0 0 130upx;">{{ item.disp_qty }}</t-td>
							<t-td style="flex:0 0 130upx;">{{ item.disp_amount }}</t-td>
							<t-td style="flex:0 0 250upx;">
								<!-- @input="changeRemark(item, index, $event)" -->
								<textarea 
									:maxlength="-1" 
									style="max-height: 80rpx; width: 100%;" 
									v-model="item.remark" 
									:disabled="!showEdit"
								/>
							</t-td>
						</t-tr>
					</view>
					
				</t-table>
			</scroll-view>

			<view class="bottom_contetn">
				<!-- <customPagination
					:total="totalCount"
					@prevPage="prevPage"
					@nextPage="nextPage"
					@jumpPage="jumpPage"
					:pageSize="pageSize"
				></customPagination> -->

				<t-table class="none" style="margin-top: 60rpx;">
					<t-tr class="none">
						<t-th class="none" style="flex:0 0 80upx;word-break: break-all;">合计:</t-th>
						<!-- <t-th  style="flex:0 0 300upx;word-break: break-all;" class="none"></t-th> -->
						<t-th class="none"></t-th>
						<t-th style="flex:0 0 269upx;" class="none" ></t-th>
						<t-th style="flex:0 0 439upx;word-break: break-all;" class="none"></t-th>
						<t-th style="flex:0 0 89upx;" class="none"></t-th>
						<t-th class="none" style="color: red;">{{ xsSlCom }}</t-th>
						<t-th class="none"></t-th>
						<t-th class="none" style="color: red;">{{ xdPriceCom.toFixed(2) }}</t-th>
						<t-th class="none" style="color: red; flex:0 0 130upx;">{{ completionCom }}</t-th>
						<t-th class="none" style="color: red; flex:0 0 130upx;">{{ fhslCom }}</t-th>
						<t-th class="none" style="color: red; flex:0 0 130upx;">{{ shjeCom.toFixed(2) }}</t-th>
						<t-th class="none" style="flex:0 0 250upx;" ></t-th>
					</t-tr>
				</t-table>
			</view>
		</view>

	</view>
</template>

<script>
import { mapState } from 'vuex'

import customHeader from '@/components/custom-header/custom-header.vue'
import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue'
import customDownSearch from '@/components/custom-downSearch/custom-downSearch.vue'
import customPagination from '@/components/custom-pagination/custom-pagination.vue'
import tTable from '@/components/t-table/t-table.vue'
import tTh from '@/components/t-table/t-th.vue'
import tTr from '@/components/t-table/t-tr.vue'
import tTd from '@/components/t-table/t-td.vue'

import { orderDetail, delOrder } from "@/api/modules/table.js"
import { getAddOrder } from '@/api/modules/index.js'
import { BASE_URL_IMG } from "@/api/config"

	var timer_s = getNowFormatDate()
	var timer_e = getNowFormatDate()
	timer_s = timer_s.substring(0, 7) + "-01";

	function getNowFormatDate() {
		var date = new Date();
		var seperator1 = "-";
		var seperator2 = ":";
		var month = date.getMonth() + 1;
		var strDate = date.getDate();
		if (month >= 1 && month <= 9) {
			month = "0" + month;
		}
		if (strDate >= 0 && strDate <= 9) {
			strDate = "0" + strDate;
		}
		var currentdate = date.getFullYear() + seperator1 + month + seperator1 +
			strDate;
		return currentdate;
	}
	export default {
		components:{
			customHeader, 
			ruiDatePicker,
			customDownSearch,
			customPagination,
			tTable,
		    tTh,
		    tTr,
		    tTd,
		},
		data() {
			return {
				dates: timer_s,
				datee: timer_e,
				form: {
					kehuName: '', // 客户名称
					dingdanStatus: '', // 订单状态
					yewuyuan: '', // 业务员
					danhao: '', // 订单号
				},
				yewuList: ['1', '2', '3', '4', '5', '6', '7', '8'],
				selectAll: false, // 全选按钮
				data: [],
				pageSize: 20, // 下单页数
				pageIndex: 1, // 当前页数
				totalCount: 0, // 应该有多少条数据
				paramItem: {}, // 当前数据
				no: '', // 订单号
				customer_name: '', // 客户名称
				remark: '', // 订单备注
				showEdit: false, // 是否编辑
				detailMap: {}, // 订单明细数据
				id: '', // 订单id
			}
		},
		onLoad(r) {
			this.paramItem = r.paramId
			this.id =  r.paramId
			this._orderDetail(JSON.stringify({ id: r.paramId }))
		},
		computed: {
			...mapState(['sideList', 'indexList']),
			xsSlCom( ) {
				return this.data.reduce((a, b) => a += b.yquantity, 0)
			},
			xdPriceCom( ) {
				return this.data.reduce((a, b) => a += b.amount, 0)
			},
			completionCom() {
				return this.data.reduce((a, b) => a += b.comp_qty, 0)
			},
			fhslCom() {
				return this.data.reduce((a, b) => a += b.disp_qty, 0)
			},
			shjeCom() {
				return this.data.reduce((a, b) => a += b.disp_amount, 0)
			},
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					if (newVal.length == 0) {
						this.selectAll = false
						return
					}
					if (newVal.every(i => i.check)) {
						this.selectAll = true
					} else {
						this.selectAll = false
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			changeInput1(item, index, e) {
				let newData = JSON.parse(JSON.stringify(this.data))
				this.data = newData.map((i, j) => ({
					...i, 
					amount: item.yquantity * item.wholesale
				}))
			},
			changeInput2(item, index, e) {
				let newData = JSON.parse(JSON.stringify(this.data))
				this.data = newData.map((i, j) => ({
					...i, 
					amount: item.yquantity * item.wholesale
				}))
			},
			async handleEditd() { // 编辑
				const { id, customer_id, bizman_id, phone, address, address2, area, user  } = this.detailMap || {}

				if (this.showEdit) {
					let sorderis = this.data.map(i => ({
						materiel_id: i.materiel_id,
						yquantity: i.yquantity,
						// price: i.price,
						wholesale: i.wholesale,
						remark: i.remark
					}))
					let param = {
						address2,
						address,
						phone,
						bizman_id,
						customer_id,
						id,
						pri: 'wmssop_01',  
						area,
						user,  
						submit: true,//true提交订单，false保存订单
						remark: this.remark, // 备注
						sorderis,
					}
					const res = await getAddOrder( JSON.stringify(param))
					const { data: { status, message } } = res || {}
					if (status == 'success') {
						uni.showToast({
							title: "修改成功!",
							icon: 'none',
							duration: 2000,
						})
						this._orderDetail(JSON.stringify({ id: this.id }))
						this.showEdit = !this.showEdit
					} else if (status == 'fail') {
						uni.showToast({
							title: message,
							icon: 'none',
							duration: 2000,
						})
					}

				} else {
					this.showEdit = !this.showEdit
				}
			},
			async handleDelete() {
				let param = this.data.filter(i => i.check).map(i => ({ sorderi_id: i.id }))
				if (param.length == 0) {
					uni.showToast({
						title: '请选择删除的数据',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				const res = await delOrder( JSON.stringify(param) )

				const { data: { status, message } } = res || {}

				if (status == 'success') {
					uni.showToast({
						title: "删除成功!",
						icon: 'none',
						duration: 2000,
					})
					this.data = JSON.parse(JSON.stringify(this.data)).filter(i => !i.check)
				} else if (status === 'fail') {
					uni.showToast({
						title: message,
						duration: 2000,
						icon: 'none'
					});
				} 
			},
			jumpPage(pages) {
				this.pageIndex = pages
				this._orderDetail(this.paramItem);
			},
			prevPage(pages) {
				this.pageIndex = pages
				this._orderDetail(this.paramItem);
			},
			nextPage(pages) {
				this.pageIndex = pages;
				this._orderDetail(this.paramItem);
			},
			changeAll() { // 全选
				this.selectAll = !this.selectAll
				if (this.selectAll) {
					this.data = JSON.parse(JSON.stringify(this.data)).map((i, j) => ({...i, check: true}))
				} else if (!this.selectAll) {
					this.data = JSON.parse(JSON.stringify(this.data)).map((i, j) => ({...i, check: false}))
				}
			},
			changeBox(e, item, index) { // 单选
				this.data = JSON.parse(JSON.stringify(this.data)).map((i, j) => ({...i, check: j === index ? !i.check : i.check}))
			},
			async _orderDetail(param) {
				const res = await orderDetail(param)
				console.log('==== res 订单详情', res)

				const { data: { data, status, message } } = res || {}

				if (status == 'success') {
					this.totalCount = data.sorderis.length
					this.detailMap = data
					this.no = data.no
					this.customer_name = data.customer_name
					this.remark = data.remark

					this.data = (data.sorderis ? data.sorderis.map(i => ({
						...i,
						files: i.files.map(i => ({
							...i, 
							newUrl: i.url? `${BASE_URL_IMG}${i.url}` : ''
						}))
					})) : [])
					// let newData = (data.dictionaries || []).map((i, j) => ({...i, active: j == 0 ? true : false}))
					// this.getSideData(newData)
				} else if (status === 'fail') {
					uni.showToast({
						title: message,
						duration: 2000,
						icon: 'none'
					});
				} 
			},
		}
	}
</script>

<style lang="less" scoped>
.content {
	.top {
		position: fixed;
		width: 100%;
		z-index: 12;
	}

	.bao_td_left {
		width: 100%;
		height: 100%;
		text-align: left;
	}


	.center {
		padding: 0 40rpx;
		padding-top: 158rpx;

		.content_search {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			.search_item {
				display: flex;
				align-items: center;

				input {
					font-size: 40rpx;
					margin-left: 10rpx;
				}
			}
		}

		.search_btn {
			display: flex;
			justify-content: space-between;
			margin: 30rpx;

			button {
				width: 360rpx;
				color: #fff;
				margin: 0;
				font-size: 50rpx;
			}

			button:nth-child(1) {
				background: red;
			}
			button:nth-child(2) {
				background: #f59a23;
			}
		}
		
		.table_content {
			height: calc(100vh - 680rpx);
			width: 100%;
		}

		.bottom_contetn {
			margin-top: 40rpx;
			font-size: 34rpx;

			.none {
				border: none;
			}
		}
	}
}
</style>
